<template>
	<view class="serviceCard">
		<view class="serviceItem" v-for="(item,index) in serviceData" :key="index" @click="ToPage(item.page)">
			<text class="service">{{item.service}}</text>
			<text class="content">{{item.content}}</text>
			<image src="https://img.js.design/assets/img/6662f047ea46b13051fc4db4.png#a73f4dae10cfd7545c6694f5607e6d75" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const serviceData =ref([
		{service:'包含资料' , content:'sql文件+vue3源码+flask代码'},
		{service:'发货方式' , content:'网盘链接，自动发货'},
		{service:'其他服务' , content:'暂无'},
		{service:'用户须知' , content:'点击查看须知', page:'/pages/user/userSubPage/privacyPolicy'},	
	])
</script>

<style lang="scss" scoped>
	.serviceCard{
		width: 100%;
		background-color: #fff;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 15rpx 0 28rpx 0;
		.serviceItem{
			width: 100%;
			height: 80rpx;
			border-bottom: 2rpx #F2F2F2 solid;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				font-family: Lantinghei SC, Lantinghei SC;
				font-weight: 400;
				font-size: 28rpx;
				text-align: left;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.service{
				max-width: 120rpx;
				white-space: nowrap;
				font-weight: 500;
				text-overflow: ellipsis;
				color: rgba(128, 128, 128, 1);
			}
			.content{
				width: 460rpx;
				color: #000;
			}
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>